<template>
  <div class="lsc-mycenter-newsdetails">
    <van-nav-bar
      title="公告详情"
      left-arrow
      @click-left="onClickBack"
    />
    <div class="lsc-mycenter-newsdetails-box">
      <div style="text-align:center">
        <h1 v-text="newsDetails.title"></h1>
        <small v-text="newsDetails.createtime"></small>
      </div>
      
      <div class="lsc-mycenter-newsdetails-con" v-html="newsDetails.contents"></div>
    </div>

    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from  'vuex'

export default {
  name: 'newsdetails',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading'
    })
  },
  data () {
    return {
      newsDetails: {}
    }
  },
  created() {
    const news_id = this.$route.query.id
    this.getNewsDetails(news_id)
  },
  methods: {
    onClickBack() {
      this.$router.push('/news')
    },
    getNewsDetails(news_id) {
      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.masterData.newsDetail, {params: {id: news_id}})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.newsDetails = res.data.data
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-mycenter-newsdetails {
  background-color: #fff;
}
.lsc-mycenter-newsdetails-box h1 {
  font-size: 16px;
  text-align: center;
  margin: 10px;
  font-weight: inherit;
}
.lsc-mycenter-newsdetails-box .lsc-mycenter-newsdetails-con {
 padding: 10px; 
}
</style>
